<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>个人中心</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #f7f7f7;
            line-height: 1;
        }
        /*列表样式*/

        .list_box {
            background-color: #fff;
            margin: 0.45rem 0;
            line-height: 1.5;
        }

        .list_box:last-child {
            margin-bottom: 2.95rem;
        }

        .list_box .list_all_info_box {
            padding: 0 0.95rem;
        }

        .list_box .list_all_info_box .txt_box {
            font-size: 0.8rem;
            color: #333;
            text-align: justify;
            padding-top: 0.95rem;
            padding-bottom: 0.95rem;
        }

        .list_box .list_all_info_box .a_box a {
            display: flex;
            align-items: center;
            margin: 0.95rem 0;
            padding: 0.45rem;
            background-color: #f7f7f7;
        }

        .list_box .list_all_info_box .a_box a .a_img {
            width: 2.45rem;
            margin-right: 0.45rem;
        }

        .list_box .list_all_info_box .a_box a .a_title {
            font-size: 0.7rem;
            color: #333;
        }

        .list_box .list_all_info_box .address_box {
            display: flex;
            align-items: center;
        }

        .list_box .list_all_info_box .address_box .address_img {
            width: 0.625rem;
            margin-right: 0.45rem;
        }

        .list_box .list_all_info_box .address_box .address_info {
            font-size: 0.6rem;
            color: #666;
        }

        .list_box .three_btn_box {
            display: flex;
            justify-content: space-around;
            padding: 1.5rem 0 0.6rem 0;
        }

        .list_box .three_btn_box .btn {
            display: flex;
            align-items: center;
        }

        .list_box .three_btn_box .btn img {
            width: 0.8rem;
            margin-right: 0.3rem;
        }

        .list_box .three_btn_box .btn span {
            font-size: 0.7rem;
            color: #999;
        }
        /*可拖动的发布按钮*/

        .release_box {
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
            background-color: rgba(255, 148, 2, .85);
            position: fixed;
            top: calc(50% - 1.5rem);
            right: 0.75rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .release_box img {
            width: 1.4rem;
        }
        /*选择朋友群发布类型*/

        .release_type_box {
            position: absolute;
            width: 100vw;
            height: 100vh;
            top: 0;
            background-color: rgba(255, 255, 255, .9);
            z-index: 30;
            display: none;
        }

        .release_type_btns {
            position: fixed;
            width: 100vw;
            display: flex;
            align-items: center;
            justify-content: space-around;
            text-align: center;
            bottom: 9.75rem;
            z-index: 40;
        }

        .graphic_sharing img,
        .commodity_sharing img {
            width: 3rem;
            margin-bottom: 0.5rem;
        }

        .graphic_sharing span,
        .commodity_sharing span {
            font-size: 0.7rem;
            color: #333;
        }

        .close_btn img {
            position: fixed;
            width: 3rem;
            right: 0.75rem;
            bottom: 4.125rem;
            z-index: 40;
        }
        /*底部关注以及聊天按钮*/

        .btns_box {
            position: fixed;
            bottom: 0;
            background-color: #fff;
            width: 100vw;
            min-height: 2.5rem;
        }

        .btns_box .follow_btn,
        .btns_box .chat_btn {
            position: relative;
            display: flex;
            min-height: 2.5rem;
            align-items: center;
            justify-content: center;
            vertical-align: middle;
        }

        .btns_box .follow_btn img {
            width: 0.6rem;
            margin-right: 0.25rem;
        }

        .btns_box .follow_btn span {
            color: #f23030;
            font-size: 0.8rem;
        }

        .btns_box .chat_btn span {
            font-size: 0.8rem;
            color: #333;
        }

        .btns_box .follow_btn::after {
            content: "";
            width: 1px;
            height: calc(100% - 1rem);
            background-color: #f2efed;
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
        }
        /*关注和取关的盒子*/

        .btm_box {
            overflow-x: inherit;
        }

        .follow_btn .follow_box {
            position: absolute;
            top: -3.5rem;
            overflow: hidden;
            border-radius: 0.3rem;
            background-color: #fff;
            box-shadow: 0 0 10px #000;
            display: none;
        }

        .follow_btn .follow_box .top_btn_box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-width: 6rem;
            padding: 0.4rem 0.4em;
            font-size: 0.8rem;
            color: #f23030;
        }

        .follow_btn .follow_box .top_btn_box .icon {
            color: #666;
        }

        .follow_btn .follow_box .btm_btn_box {
            padding: 0.4rem 0.6rem;
            font-size: 0.8rem;
        }
    </style>
</head>

<body>
    <div class="app">
        <div class="person_list aui-refresh-content">

            <ul class="all_list_box">
                <li v-for="list in list_data" class="list_box">
                    <div class="list_all_info_box" @click="open_new_win('one','详情','动态详情','',list.dynamic_id)">


                        <!-- 文本内容不为空 -->
                        <div v-if="list.content!=''" class="txt_box">{{list.content}}</div>


                        <!-- 分享  不带文本 -->
                        <div v-if="list.type==2 && list.content==''" class="a_box" style="padding-top:0.95rem;">
                            <a href="">
                                <!-- <img :src="list.logo_pic" alt="" class="a_img"> -->
                                <div class="a_img" :style="'background:url('+list.logo_pic+') center/cover no-repeat;height:2.45rem;'"></div>
                                <span class="a_title">{{list.goods_name}}-{{list.goods_title}}</span>
                            </a>
                        </div>

                        <!-- 分享 带文本 -->
                        <div v-else-if="list.type==2 && list.content" class="a_box">
                            <a href="" style="margin-top:0;">
                                <!-- <img :src="list.logo_pic" alt="" class="a_img"> -->
                                <div class="a_img" :style="'background:url('+list.logo_pic+') center/cover no-repeat;height:2.45rem;'"></div>
                                <span class="a_title">{{list.goods_name}}-{{list.goods_title}}</span>
                            </a>
                        </div>


                        <!-- 图文 带文本 -->
                        <ul v-if="list.type==1 && list.pic!='' && list.content!=''" class="aui-list aui-media-list" style="background-image: none;padding-bottom: 0.95rem;padding-top:0;">
                            <li class="aui-list-item" style="background-image: none;padding-left: 0;">
                                <div class="aui-list-item-inner" style="padding: 0;">
                                    <div class="aui-row aui-row-padded">
                                        <div v-for="img_src in list.pic" class="aui-col-xs-4">
                                            <!-- <img src="../../image/four/test.jpg"> -->
                                            <div class="img" :style="'background:url(http://shengyibang.unohacha.com'+img_src+') center/cover no-repeat;'"></div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>

                        <!-- 图文 不带文本 -->
                        <ul v-else-if="list.type==1 && list.content=='' && list.pic!=''" class="aui-list aui-media-list" style="background-image: none;padding-bottom: 0.95rem;padding-top: 0.95rem;">
                            <li class="aui-list-item" style="background-image: none;padding-left: 0;">
                                <div class="aui-list-item-inner" style="padding: 0;">
                                    <div class="aui-row aui-row-padded">
                                        <div v-for="img_src in list.pic" class="aui-col-xs-4">
                                            <!-- <img src="../../image/four/test.jpg"> -->
                                            <div class="img" :style="'background:url(http://shengyibang.unohacha.com'+img_src+') center/cover no-repeat;'"></div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>


                        <div class="address_box">
                            <img src="../../image/four/address.png" alt="" class="address_img">
                            <span v-if="list.address" class="address_info">{{list.address}}</span>
                            <span v-else class="address_info">地球的某个角落</span>
                        </div>
                    </div>




                    <!-- 分享评论点赞状态 -->
                    <div class="three_btn_box">
                        <!-- <div class="btn">
                            是否已分享
                            <img v-if="list.is_forward!=0" src="../../image/four/fx_on.png" alt="">
                            <img v-else src="../../image/four/fx_off.png" alt="">

                            分享数量
                            <span v-if="list.forward_num!=0">{{list.forward_num}}</span>
                            <span v-else></span>
                        </div> -->


                        <div class="btn" v-if="list.goods_id!=0 && list.type==2" @click="testShare(list.goods_id)">
                            <!-- 是否已分享 -->
                            <img v-if="list.is_forward!=0" src="../../image/four/fx_on.png" alt="">
                            <img v-else src="../../image/four/fx_off.png" alt="">

                            <!-- 分享数量 -->
                            <span v-if="list.forward_num!=0">{{list.forward_num}}</span>
                            <span v-else></span>
                        </div>

                        <div class="btn" v-else-if="list.goods_id==0 && list.type==3 && list.forward.forward_type==2" @click="testShare(list.forward.forward_goods_id)">
                            <!-- 是否已分享 -->
                            <img v-if="list.is_forward!=0" src="../../image/four/fx_on.png" alt="">
                            <img v-else src="../../image/four/fx_off.png" alt="">

                            <!-- 分享数量 -->
                            <span v-if="list.forward_num!=0">{{list.forward_num}}</span>
                            <span v-else></span>
                        </div>

                        <!-- <div class="btn" v-else @click="open_new_win('one','详情','动态详情','',friend_dynamic.dynamic_id)">
                            是否已分享
                            <img v-if="friend_dynamic.is_forward!=0" src="../../image/four/fx_on.png" alt="">
                            <img v-else src="../../image/four/fx_off.png" alt="">

                            分享数量
                            <span v-if="friend_dynamic.forward_num!=0">{{friend_dynamic.forward_num}}</span>
                            <span v-else></span>
                        </div> -->






                        <div class="btn" @click="open_new_win('one','详情','动态详情','',list.dynamic_id)">
                            <!-- 是否已评论 -->
                            <img v-if="list.is_item!=0" src="../../image/four/pl_on.png" alt="">
                            <img v-else src="../../image/four/pl_off.png" alt="">

                            <!-- 评论的数量 -->
                            <span v-if="list.item_num!=0">{{list.item_num}}</span>
                            <span v-else></span>
                        </div>

                        <!-- <div class="btn">
                            是否点赞
                            <img v-if="list.is_like!=0" src="../../image/four/dz_on.png" alt="">
                            <img v-else src="../../image/four/dz_off.png" alt="">

                            点赞数量
                            <span v-if="list.likecount!=0">{{list.likecount}}</span>
                            <span v-else></span>
                        </div> -->


                        <div class="btn" v-if="list.is_like==0" @click="to_dz(1,list.dynamic_id)">
                            <!-- 是否点赞 -->
                            <img v-if="list.is_like!=0" src="../../image/four/dz_on.png" alt="">
                            <img v-else src="../../image/four/dz_off.png" alt="">

                            <!-- 点赞数量 -->
                            <span v-if="list.likecount!=0">{{list.likecount}}</span>
                            <span v-else></span>
                        </div>


                        <div class="btn" v-else @click="to_dz(2,list.dynamic_id)">
                            <!-- 是否点赞 -->
                            <img v-if="list.is_like!=0" src="../../image/four/dz_on.png" alt="">
                            <img v-else src="../../image/four/dz_off.png" alt="">

                            <!-- 点赞数量 -->
                            <span v-if="list.likecount!=0">{{list.likecount}}</span>
                            <span v-else></span>
                        </div>
                    </div>
                </li>
            </ul>

        </div>

        <div class="btns_box aui-content btm_box" v-show="target_id!=my_id">
            <div class="aui-col-xs-6 follow_btn">
                <img src="../../image/four/add_follow.png" alt="">
                <span>关注</span>

                <div class="follow_box">
                    <div class="top_btn_box aui-border-b"><span>我的关注</span><i class="aui-iconfont aui-icon-right icon"></i></div>
                    <div class="btm_btn_box">取消关注</div>
                </div>
            </div>
            <div class="aui-col-xs-6 chat_btn" @click="open_chat_win('single',target_name)">
                <span>聊天</span>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript">
    apiready = function() {
            // 设置状态栏文字颜色
        api.setStatusBarStyle({
            style: 'dark'
        });


        // 实例化vue 渲染个人动态列表
        var person_list_data = new Vue({
            el: '.app',
            data: {
                list_data: [],
                my_id: $api.getStorage('user_id'),
                target_name: '',
                target_id: 0,
                page: 1
            },
            mounted: function() {
                var $_this = this;

                $_this.get_datas();
                $_this.to_pullRefresh();
                $_this.scroll_load();

            },
            methods: {
              to_dz: function(type,id) {
                // alert(id)
                  var $_this = this;
                  api.ajax({
                      url: window.Url.Community_addLike,
                      method: 'post',
                      data: {
                          values: {
                              token: $api.getStorage('user_data').token,
                              dynamic_id: id,
                              like_type: type,
                              type: 1
                          }
                      }
                  }, function(ret, err) {
                      if (ret) {
                          // alert( JSON.stringify( ret ) );
                          if (ret.re == 1) {

                              api.toast({
                                  msg: ret.info
                              });

                              if (ret.info == "点赞成功") {
                                  $_this.is_like = 1;
                                  $_this.page = 1;
                                  $_this.get_datas();
                              } else {
                                  $_this.is_like = 0;
                                  $_this.page = 1;
                                  $_this.get_datas();
                              }
                          }
                      } else {
                          alert(JSON.stringify(err));
                      }
                  });

              },
              // 点击转发按钮
              testShare:function(goodsId){
                api.openFrame({
                    name: 'share',
                    url: '../one_frame/share2.html',
                    pageParam: {
                        goodsid:goodsId
                    }
                });

              },
                get_datas:function(){
                  var $_this = this;
                  // 请求个人动态接口
                  api.ajax({
                      url: window.Url.Community_personalDynamicList,
                      method: 'post',
                      data: {
                          values: {
                              token: $api.getStorage('token'),
                              user_id: api.pageParam.target_id,
                              page: 1
                          }
                      }
                  }, function(ret, err) {
                      if (ret) {
                          // console.log('个人动态获取到的数据----' + JSON.stringify(ret));
                          if (ret.re == 1) {
                              $_this.target_name = ret.data.username;
                              $_this.target_id = ret.data.user_id;
                              $_this.list_data = ret.data.list;
                              $_this.$nextTick(function() {
                                  $('.img').height($('.img').width())
                              })
                          }
                      } else {
                          alert(JSON.stringify(err));
                      }
                  });
                },
                scroll_load: function() {

                    var $_this = this;
                    var scroll = new auiScroll({
                        listen: true, //是否监听滚动高度，开启后将实时返回滚动高度
                        distance: 40 //判断到达底部的距离，isToBottom为true
                    }, function(ret) {
                        if (ret.isToBottom) {
                          console.log(1111111);
                            $_this.page++
                                // 页面加载完毕请求数据接口
                                api.ajax({
                                    url: window.Url.Community_personalDynamicList,
                                    method: 'post',
                                    data: {
                                        values: {
                                            token: $api.getStorage('token'),
                                            user_id: api.pageParam.target_id,
                                            page: $_this.page
                                        }
                                    }
                                }, function(ret, err) {
                                    if (ret) {
                                        // console.log('个人动态获取到的数据----' + JSON.stringify(ret));
                                        if (ret.re == 1) {
                                            $_this.target_name = ret.data.username;
                                            $_this.target_id = ret.data.user_id;
                                            // $_this.list_data = ret.data.list;

                                            $_this.list_data = $_this.list_data.concat(ret.data.list)
                                            $_this.$nextTick(function() {
                                                $('.img').height($('.img').width())
                                            })
                                        }
                                    } else {
                                        alert(JSON.stringify(err));
                                    }
                                });
                        }

                    });
                },
                to_pullRefresh: function() {
                    var $_this = this;
                    var pullRefresh = new auiPullToRefresh({
                        container: document.querySelector('.aui-refresh-content'), //下拉容器
                        triggerDistance: 50 //下拉高度
                    }, function(ret) {
                        if (ret.status == "success") {
                          $_this.page = 1;
                            setTimeout(function() {
                                $_this.get_datas();
                                pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                            }, 500)

                        }
                    })
                },
            }
        })



    };



    // 关注以及取关
    $('body').on('click', '.follow_btn', function() {
        $(this).children('img').attr('src', '../../image/four/gz_success.png');
        $(this).children('span').text('关注成功');
        $('.follow_box').show(500);
    })

    // 取消关注
    $('body').on('click', '.follow_btn .btm_btn_box', function(ev) {
        console.log(1);
        $('.follow_btn').children('img').attr('src', '../../image/four/add_follow.png');
        $('.follow_btn').children('span').text('关注');
        $('.follow_box').hide();
        return false;
    })




    // 打开对应的聊天窗口
    function open_chat_win(type, target_name) {
        api.openWin({
            name: type + '_chat_header',
            url: 'four_headers/' + type + '_chat_header.html',
            pageParam: {
                target_name: target_name,
                target_id: api.pageParam.target_id
            }
        });
    }


    // 打开新的窗口
    function open_new_win(index, title, type, img_src, dynamic_id) {
        api.openWin({
            name: 'four_' + index + '_header',
            url: 'four_headers/four_' + index + '_header.html',
            pageParam: {
                title: title,
                type: type,
                dynamic_id: dynamic_id,
                img_src: img_src,
                friend_id: dynamic_id
            }
        });
    }
</script>

</html>
